import React from 'react';
import style from './style.css'
import {Layout} from 'antd'
import {getHistory, getUrlParams} from "../../util/uitls";
import {GET_DEPOSIT_DETAIL, GET_SALES_ORDERS_DETAIL} from "../../api/order";
import Map from 'lodash.map'
import {POST_WEICHATPAY} from "../../api/shopcart";
import {wechaPay} from "../../api/financeCenter";


class WeichatPay extends React.Component {
    constructor(props) {
        super()
        this.state = {
            imageCode: props.imageCode,
            orderId: props.orderId,
            depositDetail: {depositAmount: ""},
            orderDetail: {
                id: "",
                currency: {
                    currencySign: "￥"
                },
                salesOrderItems: []
            }
        }

    }

    init(props) {
        var self = this
        try {
            var imageCode = props.imageCode;
            var orderId = props.orderId;
            var depositId = props.depositId;
            self.setState({imageCode, orderId, depositId})
            new QRCode(document.getElementById("qrcode"), imageCode);
            if (orderId) {
                GET_SALES_ORDERS_DETAIL(orderId).then(res => {
                    self.setState({orderDetail: res})
                })
            }
            if (depositId) {
                GET_DEPOSIT_DETAIL(depositId).then(res => {
                    self.setState({depositDetail: res})
                })
            }
        } catch (e) {
            console.error(e)
        }
    }

    componentDidMount() {
        this.init(this.props)
    }

    componentWillReceiveProps(nextProps) {
        var doc = document.getElementById("qrcode")
        doc.innerHTML = ""
        this.init(nextProps)
    }

    componentWillUnmount() {
    }

    reloadCode() {
        var self = this
        if (this.state.orderId) {
            POST_WEICHATPAY(this.state.orderId).then(imageSrc => {
                self.setState({imageCode: imageSrc})
                var doc = document.getElementById("qrcode")
                doc.innerHTML = "";
                new QRCode(document.getElementById("qrcode"), imageSrc);
            })
        }
        if (this.state.depositId) {
            wechaPay({
                depositAmount: this.state.depositDetail.depositAmount,
                currencyId: 1,
                depositId: this.state.depositId
            }).then(res => {
                var imageSrc = res.result
                self.setState({imageCode: imageSrc})
                var doc = document.getElementById("qrcode")
                doc.innerHTML = "";
                new QRCode(document.getElementById("qrcode"), imageSrc);
            })
        }
    }

    render() {
        var total = 0;
        Map(this.state.orderDetail.salesOrderItems, item => {
            total += item.unitPrice
        })
        return (<div className={style.content}>
                <div className={style.WeichatPay}>
                    <div className={style.content1}>
                        <div className={style.row1}>
                            <div className={style.tip}>
                                如支付不成功，请点击 <strong onClick={this.reloadCode.bind(this)}>刷新</strong> 本页面
                            </div>
                            <div className={style.wrapperImage} id={"qrcode"}>
                                {/*<img src="" alt=""/>*/}
                            </div>
                            <div className={style.tipbottom}>
                                <div className={style.left}>
                                    订单编号：{this.state.orderDetail.id && this.state.orderDetail.id}
                                    {this.state.depositDetail.id && this.state.depositDetail.id}
                                </div>
                                <div className={style.right}>
                                    应付金额: <strong>
                                    <span>{total != 0 && total && total.toFixed(2)}</span>
                                    {this.state.depositDetail.depositAmount && this.state.depositDetail.depositAmount.toFixed(2)}￥</strong>
                                </div>
                            </div>
                        </div>
                        <div className={style.row2}>
                            <div className={style.wrapperImage1}>
                                <img src="/static/weixinpaydesc.png" alt=""/>
                            </div>
                            <div className={style.tipbottom}>
                                <div className={style.top}>
                                    第一步：打开微信在右下方点击发现
                                </div>
                                <div className={style.bottom}>
                                    第二步：点击扫一扫对准二维码支付成功
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

WeichatPay.defaultProps = {
    imageCode: "",
    orderId: "",
    depositId: ""
}
export default WeichatPay;